<div>
  <div class="searchItem">
    <label>品牌：</label>
    <nz-select [(ngModel)]="query.brandId" (ngModelChange)="brandChange()" nzShowSearch
               nzAllowClear nzPlaceHolder="请选择品牌" [nzBackdrop]="true">
      <nz-option *ngFor="let b of brandOptions" [nzValue]="b.id" [nzLabel]="b.name"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>品类：</label>
    <nz-select [(ngModel)]="query.category" (ngModelChange)="categoryChange()" nzShowSearch nzAllowClear
               nzPlaceHolder="请选择品类" [nzBackdrop]="true">
      <nz-option [nzValue]="1" nzLabel="手机"></nz-option>
      <nz-option [nzValue]="2" nzLabel="平板"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>系列：</label>
    <nz-select [(ngModel)]="query.seriesId" (ngModelChange)="seriesChange()" nzShowSearch nzAllowClear
               [nzPlaceHolder]="seriesOptions.length?'请选择系列':'请先选择品牌'" [nzBackdrop]="true">
      <nz-option *ngFor="let s of seriesOptions" [nzValue]="s.id" [nzLabel]="s.name"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>机型：</label>
    <nz-select [(ngModel)]="query.modelId" nzShowSearch nzAllowClear [nzPlaceHolder]="modelOptions.length?'请选择机型':'请先选择系列'" [nzBackdrop]="true">
      <nz-option *ngFor="let m of modelOptions" [nzValue]="m.id" [nzLabel]="m.name"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>更新时间：</label>
    <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.time"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
  <div>
    <button nz-button nzType="primary" routerLink="/aisi-recyc/modelBasePriceEdit">新增</button>
  </div>
</div>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #table
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="tableData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="tableData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">ID</th>
    <th nzAlign="center">机型</th>
    <th nzAlign="center">品牌</th>
    <th nzAlign="center">品类</th>
    <th nzAlign="center">系列</th>
    <th nzAlign="center">更新时间</th>
    <th nzAlign="center">备注</th>
    <th nzAlign="center" nzWidth="160px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of table.data">
    <td nzAlign="center">{{ data['id'] }}</td>
    <td nzAlign="center">{{ data['modelName'] }}</td>
    <td nzAlign="center">{{ data['brandName'] }}</td>
    <td nzAlign="center">{{ data['category'] === 1 ? '手机' : '平板'}}</td>
    <td nzAlign="center">{{ data['seriesName'] }}</td>
    <td nzAlign="center">{{ data['updateTime'] }}</td>
    <td nzAlign="center">{{ data['note'] }}</td>
    <td nzAlign="center">
      <a (click)="toModify('view',data)">查看</a>
      <a (click)="toModify('modify',data)">更新价格</a>
      <a style="color: red" nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除?"
         nzOkText="确认"
         (nzOnConfirm)="deleteBasePrice(data['id'])"
         nzCancelText="取消">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
